<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>我的浏览器主页</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      position: fixed;
      width: 100%;
      height: 100%;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: none;
    }

    /* 页面容器 */
    .page {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 1rem;
    }

    .page.active {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    /* 主页样式 */
    .home-container {
      text-align: center;
      background: rgba(255, 255, 255, 0.95);
      padding: 2rem 1.5rem;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      width: 100%;
      max-width: 400px;
      height: 100%;
      max-height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .title {
      font-size: 2rem;
      color: #333;
      margin-bottom: 0.5rem;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    .subtitle {
      font-size: 1rem;
      color: #666;
      margin-bottom: 2rem;
    }

    .button-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
      width: 100%;
    }

    .main-button {
      padding: 1.5rem 2rem;
      font-size: 1.2rem;
      font-weight: 600;
      border: none;
      border-radius: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      color: white;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      -webkit-tap-highlight-color: transparent;
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .main-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    }

    .main-button:active {
      transform: translateY(-1px);
    }

    /* 子页面样式 */
    .subpage-container {
      text-align: center;
      background: rgba(255, 255, 255, 0.95);
      padding: 2rem 1.5rem;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      width: 100%;
      max-width: 400px;
      height: 100%;
      max-height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow-y: auto;
    }

    .back-button {
      padding: 1rem 2rem;
      font-size: 1.1rem;
      font-weight: 600;
      border: none;
      border-radius: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      color: white;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      -webkit-tap-highlight-color: transparent;
      margin-top: auto;
      margin-bottom: 1rem;
    }

    .back-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    }

    .back-button:active {
      transform: translateY(-1px);
    }

    .placeholder {
      padding: 2rem;
      background: rgba(250, 112, 154, 0.1);
      border-radius: 15px;
      border: 2px dashed rgba(250, 112, 154, 0.3);
      color: #fa709a;
      font-size: 1.1rem;
      font-weight: 500;
      margin: 1.5rem 0;
    }

    .function-button {
      padding: 1rem 2rem;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
      margin: 0.5rem;
      -webkit-tap-highlight-color: transparent;
    }

    .function-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .function-button:active {
      transform: translateY(0);
    }

    .photo-container {
      margin: 1rem 0;
      text-align: center;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 0;
    }

    .photo-image {
      max-width: 100%;
      max-height: 150px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 1rem;
      object-fit: cover;
    }

    .loading {
      color: #fa709a;
      font-style: italic;
    }

    .error {
      color: #e74c3c;
      font-weight: 500;
    }

    /* 地图页面样式 */
    .map-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    .map-embed {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
      background: #f0f0f0;
    }

    .floating-button {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 10;
      padding: 1rem 2rem;
      font-size: 1.1rem;
      font-weight: 600;
      border: none;
      border-radius: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      color: white;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      -webkit-tap-highlight-color: transparent;
      backdrop-filter: blur(10px);
    }

    .floating-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    }

    .floating-button:active {
      transform: translateY(-1px);
    }

    /* 响应式设计 */
    @media (max-width: 480px) {
      body {
        padding: 0.5rem;
      }

      .home-container,
      .subpage-container {
        padding: 1.5rem 1rem;
        border-radius: 15px;
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
      }

      .title {
        font-size: 1.8rem;
      }

      .subtitle {
        font-size: 0.9rem;
      }

      .main-button {
        padding: 1.2rem 1.5rem;
        font-size: 1.1rem;
        min-height: 70px;
      }

      .back-button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        margin-bottom: 0.5rem;
      }

      .photo-image {
        max-height: 120px;
      }

      .floating-button {
        top: 15px;
        left: 15px;
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
      }
    }

    @media (max-width: 360px) {
      .subpage-container {
        padding: 1rem 0.8rem;
        margin: 0.3rem;
        max-height: calc(100vh - 0.6rem);
      }

      .photo-image {
        max-height: 100px;
      }

      .floating-button {
        top: 10px;
        left: 10px;
        padding: 0.7rem 1.2rem;
        font-size: 0.9rem;
      }
    }
  </style>
</head>
<body>
  <!-- 主页 -->
  <div id="home-page" class="page active">
    <div class="home-container">
      <div class="header">
        <h1 class="title">我的浏览器主页</h1>
        <p class="subtitle">选择功能</p>
      </div>
      
      <div class="button-grid">
        <button class="main-button" onclick="showPage('basic-function')">
          基础功能
        </button>
        <button class="main-button" onclick="showPage('navigation')">
          导航
        </button>
        <button class="main-button" onclick="showPage('map')">
          地图
        </button>
      </div>
    </div>
  </div>

  <!-- 基础功能页面 -->
  <div id="basic-function-page" class="page">
    <div class="subpage-container">
      <div class="header">
        <h1 class="title">基础功能</h1>
        <p class="subtitle">基础功能演示</p>
      </div>
      
      <div class="content">
        <div class="placeholder">
          🔧 基础功能页面<br>
          点击下方按钮测试功能
        </div>
        
        <button class="function-button" onclick="showAlert()">
          显示提示
        </button>
        <button class="function-button" onclick="getLocation()">
          获取位置
        </button>
      </div>
      
      <button class="back-button" onclick="showPage('home')">
        ← 返回主页
      </button>
    </div>
  </div>

  <!-- 导航页面 -->
  <div id="navigation-page" class="page">
    <div class="subpage-container">
      <div class="header">
        <h1 class="title">导航</h1>
        <p class="subtitle">导航功能</p>
      </div>
      
      <div class="content">
        <div class="placeholder">
          🧭 导航页面<br>
          导航相关功能
        </div>
        
        <div class="photo-container" id="photo-container">
          <!-- 照片将在这里显示 -->
        </div>
        
        <button class="function-button" onclick="takePhoto()">
          拍照
        </button>
      </div>
      
      <button class="back-button" onclick="showPage('home')">
        ← 返回主页
      </button>
    </div>
  </div>

  <!-- 地图页面 -->
  <div id="map-page" class="page">
    <div class="map-container">
      <embed class="map-embed" type="native/map" id="map1" />
    </div>
    <button class="floating-button" onclick="showPage('home')">
      ← 返回主页
    </button>
    <script>
      function handleBackClick() {
        // 使用 alert 作为通信桥梁
        alert('performForward');
      }

            // 供ArkTS调用的函数
            function setBackButtonVisible(visible) {
                const btn = document.querySelector('.floating-button');
                btn.style.display = visible ? 'block' : 'none';
            }
    </script>
  </div>

  <script>
    // 页面切换函数
    function showPage(pageId) {
      // 隐藏所有页面
      const pages = document.querySelectorAll('.page');
      pages.forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示目标页面
      const targetPage = document.getElementById(pageId + '-page');
      if (targetPage) {
        targetPage.classList.add('active');
      }
    }

    // 基础功能 - 显示提示
    function showAlert() {
      alert('这是一个提示消息！');
    }
    // 基础功能 - 获取位置
    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function(position) {
            const latitude = position.coords.latitude;
            const longitude = position.coords.longitude;
            alert(`位置信息：\n纬度：${latitude}\n经度：${longitude}`);
          },
          function(error) {
            alert('获取位置失败：' + error.message);
          }
        );
      } else {
        alert('浏览器不支持地理位置功能');
      }
    }

    // 导航功能 - 拍照
    function takePhoto() {
      const photoContainer = document.getElementById('photo-container');
      
      // 显示加载状态
      photoContainer.innerHTML = '<div class="loading">正在拍照...</div>';
      
      // 调用 HWJSBridge
      setTimeout(() => {
        try {
          // 检查 HWJSBridge 是否存在
          if (typeof HWJSBridge !== 'undefined' && HWJSBridge.takePhoto) {
            HWJSBridge.takePhoto(function(base64Image) {
              // 成功回调
              photoContainer.innerHTML = `
                <img src="data:image/jpeg;base64,${base64Image}" alt="拍摄的照片" class="photo-image">
                <button class="function-button" onclick="takePhoto()">重新拍照</button>
              `;
            }, function(error) {
              // 失败回调
              photoContainer.innerHTML = `
                <div class="error">拍照失败：${error.message || error}</div>
                <button class="function-button" onclick="takePhoto()">重试</button>
              `;
            });
          } else {
            // HWJSBridge 不存在或没有 takePhoto 方法，显示占位符
            photoContainer.innerHTML = `
              <div class="placeholder">
                📷 拍照功能<br>
                HWJSBridge 不可用
              </div>
              <button class="function-button" onclick="takePhoto()">重试</button>
            `;
          }
        } catch (error) {
          photoContainer.innerHTML = `
            <div class="error">拍照失败：${error.message}</div>
            <button class="function-button" onclick="takePhoto()">重试</button>
          `;
        }
      }, 1000);
    }

    // 添加触觉反馈（如果支持）
    function addVibration() {
      if (navigator.vibrate) {
        navigator.vibrate(50);
      }
    }

    // 为所有按钮添加触觉反馈
    document.addEventListener('DOMContentLoaded', function() {
      const buttons = document.querySelectorAll('button');
      buttons.forEach(button => {
        button.addEventListener('click', addVibration);
      });
    });
  </script>
</body>
</html> 